<template>
  <div style="height: 100%">
    <!-- 弹窗 -->
    <el-dialog v-model="store.examOpen" :show-close="false" append-to-body class="dialogClass" fullscreen draggable
               :header="null"
               :footer="null"
    >
      <!-- 弹窗内容 -->
      <template #default>
        <div v-if="isNotice" class="show-info">
          <h2 class="title">考试须知</h2>
          <div class="content">
            <div v-html="notice" class="notice-text"></div>
          </div>
          <div class="action-buttons">
            <el-button type="primary"  class="el-button__primary" @click="updateNotice()">我已知晓</el-button>
          </div>
        </div>
        <div v-if="!isNotice">
          <studentExamAnswer :exam-id="store.examId" :end-time="endTime" :exam-name="examName" @close="closeDialog"/>
        </div>
        <div v-if="notices"></div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { studentExam } from "@/stores/exam/studentExamStore.ts";
import {computed, ref} from "vue";
import {getExamBaseInfo} from "@/api/question/exam.ts";
import StudentExamAnswer from "@/components/exam/studentExamAnswer.vue";

const notice = ref(
    ''
);
const  endTime=ref('')
const examName=ref('')
const store = studentExam();
const isNotice=ref(true)
const updateNotice=()=>{
  isNotice.value=false
}
const closeDialog = () => {
  store.setExamOpen(false);
  store.setExamId(0);
};
const getExamBase=async () => {
  const res=await getExamBaseInfo(store.examId)
  notice.value=res.data.examNotice
  endTime.value=res.data.endTime
  examName.value=res.data.examCode+'-'+res.data.examName
}
// 计算属性
const notices = computed(async  () => {
  await getExamBase()
});
</script>

<style scoped>
/* 全局样式 */
.dialogClass   .el-dialog__header {
  display: none;
}

.show-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  max-width: 80vw; /* 最大宽度限制 */
  margin: 0 auto;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.content {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  text-align: left;
  margin-bottom: 20px;
}

.notice-text {
  white-space: pre-wrap; /* 保留换行符 */
  word-break: break-word; /* 自动换行 */
}

.action-buttons {
  display: flex;
  justify-content: center;
}
.dialogClass .el-dialog__body{
  min-height: 100vh;
  overflow: auto;
  background: none;
}
.dialogClass .el-dialog__header{
  padding-bottom: 0;
}
</style>